<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <!--引入本地 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <!--    引入Layui组件-->
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
    <script type="text/javascript" src="/admin/html/module/yumenyoutian/js/api.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/jQuery.print.js?v=1.1"></script>
    <link rel="stylesheet" href="/admin/js-css/css/listvue.css"  media="all" >

    <style>
        .head_td{
            font-weight: normal;
        }
        table tr td{
            border: 1px solid #0C0C0C;
        }

        thead tr th{
            border: 1px solid #0C0C0C
        }
        .not_border tr td{
            border: 0;
        }


    </style>

</head>
<body>

<div id="app">
    <!-- 查询表单 -->
    <div id="topdiv" ref="appdiv" >
        <div class="demoTable" style="padding: 5px;"   >
            <el-form :inline="true" size="mini"   ref="listSearch"   >
                <el-form-item    v-for="(item,index) in listSearch" :style="'display:'+item.isHide" >
                    <!--模糊搜索-->
                    <template  v-if="item.gs == '' || item.gs=='0' || item.gs=='4' || item.gs == '6'"  >

                        <template v-if="item.type == '0'">
                            <el-input style="width:180px" v-model="searchInputDtos[item.key].value" :placeholder="item.lable"  clearable ></el-input>
                        </template>

                        <!--下拉框多选-->
                        <template v-if="item.type == '6' || item.type=='8'" >
                            <el-select  multiple :placeholder="item.lable"
                                        filterable style="width:180px"
                                        v-model="searchInputDtos[item.key].values"  >
                                <el-option value="" ></el-option>
                                <el-option :value="vm.value"  :label="vm.showValue" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</el-option>
                            </el-select>
                        </template>

                        <template v-if="item.type == '11'" >
                            <el-cascader :placeholder="item.lable" :ref="item.key" size="mini" @change="handleChange(item.key)" clearable
                                         v-model="searchInputDtos[item.key].value"  :props="cascaderProps[item.key]"
                            ></el-cascader>
                        </template>

                        <!--日期框-->
                        <template v-if="item.type == '1'">
                            <el-date-picker value-format="yyyy-MM-dd" :placeholder="item.lable"
                                            v-model="searchInputDtos[item.key].value"  style="width:180px"
                                            type="date" >
                            </el-date-picker>
                        </template>

                        <!--日期框时分秒-->
                        <template v-if="item.type == '5'">
                            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" :placeholder="item.lable"
                                            v-model="searchInputDtos[item.key].value"  style="width:180px"
                                            type="datetime" >
                            </el-date-picker>
                        </template>

                        <!--日期框年月-->
                        <template v-if="item.type == '15'">
                            <el-date-picker value-format="yyyyMM" :placeholder="item.lable"
                                            v-model="searchInputDtos[item.key].value"  style="width:180px"
                                            type="month" >
                            </el-date-picker>
                        </template>

                    </template>

                    <!--大于小于输入框-->
                    <template  v-if="item.gs=='1'"  >
                        <template v-if="item.type == '0'">
                            <el-input style="width:180px"  v-model="searchInputDtos[item.key].searchTypeForDateDto.start" :placeholder="'开始'+item.lable" ></el-input>
                            <el-input style="width:180px"  v-model="searchInputDtos[item.key].searchTypeForDateDto.end" :placeholder="'结束'+item.lable" ></el-input>
                        </template>

                        <!--下拉框多选-->
                        <template v-if="item.type == '6' || item.type=='8'" >
                            <el-select filterable style="width:180px" :placeholder="'开始'+item.lable"
                                       v-model="searchInputDtos[item.key].searchTypeForDateDto.start" >
                                <el-option value="" ></el-option>
                                <el-option :value="vm.value" :label="vm.showValue" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</el-option>
                            </el-select>

                            <el-select  filterable style="width:180px" :placeholder="'结束'+item.lable"
                                        v-model="searchInputDtos[item.key].searchTypeForDateDto.end" >
                                <el-option value="" ></el-option>
                                <el-option :value="vm.value" :label="vm.showValue" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</el-option>
                            </el-select>
                        </template>

                        <template v-if="item.type == '11'" >
                            <el-cascader  :ref="item.key" size="mini" @change="handleChange(item.key)" clearable :placeholder="'开始'+item.lable"
                                          v-model="searchInputDtos[item.key].searchTypeForDateDto.start" :props="cascaderProps[item.key]"
                            ></el-cascader>
                            <el-cascader  :ref="item.key" size="mini" @change="handleChange(item.key)" clearable :placeholder="'结束'+item.lable"
                                          v-model="searchInputDtos[item.key].searchTypeForDateDto.end" :props="cascaderProps[item.key]"
                            ></el-cascader>
                        </template>

                        <!--日期框-->
                        <template v-if="item.type == '1'">
                            <el-date-picker value-format="yyyy-MM-dd"  :placeholder="'开始'+item.lable"
                                            v-model="searchInputDtos[item.key].searchTypeForDateDto.start" style="width:180px"
                                            type="date" >
                            </el-date-picker>
                            <el-date-picker value-format="yyyy-MM-dd" :placeholder="'结束'+item.lable"
                                            v-model="searchInputDtos[item.key].searchTypeForDateDto.end" style="width:180px"
                                            type="date" >
                            </el-date-picker>
                        </template>

                        <!--日期框时分秒-->
                        <template v-if="item.type == '5'">
                            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" :placeholder="'开始'+item.lable"
                                            v-model="searchInputDtos[item.key].searchTypeForDateDto.start" style="width:180px"
                                            type="datetime" >
                            </el-date-picker>
                            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" :placeholder="'结束'+item.lable"
                                            v-model="searchInputDtos[item.key].searchTypeForDateDto.end" style="width:180px"
                                            type="datetime" >
                            </el-date-picker>
                        </template>


                        <!--日期框年月-->
                        <template v-if="item.type == '15'">
                            <el-date-picker value-format="yyyyMM" :placeholder="'开始'+item.lable"
                                            v-model="searchInputDtos[item.key].searchTypeForDateDto.start" style="width:180px"
                                            type="month" >
                            </el-date-picker>
                            <el-date-picker value-format="yyyyMM" :placeholder="'结束'+item.lable"
                                            v-model="searchInputDtos[item.key].searchTypeForDateDto.end" style="width:180px"
                                            type="month" >
                            </el-date-picker>
                        </template>

                    </template>

                    <!--大于条件-->
                    <template  v-if="item.gs=='2'"  >
                        <template v-if="item.type == '0'">
                            <el-input style="width:180px"  v-model="searchInputDtos[item.key].searchTypeForDateDto.start" :placeholder="item.lable"  ></el-input>
                        </template>

                        <!--下拉框多选-->
                        <template v-if="item.type == '6' || item.type=='8'" >
                            <el-select filterable style="width:180px"  :placeholder="item.lable"
                                       v-model="searchInputDtos[item.key].searchTypeForDateDto.start" >
                                <el-option value="" ></el-option>
                                <el-option :value="vm.value" :label="vm.showValue" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</el-option>
                            </el-select>
                        </template>

                        <template v-if="item.type == '11'" >
                            <el-cascader  :ref="item.key" size="mini" @change="handleChange(item.key)" clearable  :placeholder="item.lable"
                                          v-model="searchInputDtos[item.key].searchTypeForDateDto.start" :props="cascaderProps[item.key]"
                            ></el-cascader>
                        </template>

                        <!--日期框-->
                        <template v-if="item.type == '1'">
                            <el-date-picker value-format="yyyy-MM-dd"  :placeholder="item.lable"
                                            v-model="searchInputDtos[item.key].searchTypeForDateDto.start" style="width:180px"
                                            type="date" >
                            </el-date-picker>
                        </template>

                        <!--日期框时分秒-->
                        <template v-if="item.type == '5'">
                            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss"  :placeholder="item.lable"
                                            v-model="searchInputDtos[item.key].searchTypeForDateDto.start" style="width:180px"
                                            type="datetime" >
                            </el-date-picker>
                        </template>


                        <!--日期框年月-->
                        <template v-if="item.type == '15'">
                            <el-date-picker value-format="yyyyMM"  :placeholder="item.lable"
                                            v-model="searchInputDtos[item.key].searchTypeForDateDto.start" style="width:180px"
                                            type="month" >
                            </el-date-picker>
                        </template>

                    </template>

                    <!--小于条件-->
                    <template  v-if="item.gs=='3'"  >
                        <template v-if="item.type == '0'">
                            <el-input style="width:180px"  v-model="searchInputDtos[item.key].searchTypeForDateDto.end"  :placeholder="item.lable"  ></el-input>
                        </template>

                        <!--下拉框多选-->
                        <template v-if="item.type == '6' || item.type=='8'" >

                            <el-select  filterable style="width:180px"
                                        v-model="searchInputDtos[item.key].searchTypeForDateDto.end"  :placeholder="item.lable" >
                                <el-option value="" ></el-option>
                                <el-option :value="vm.value"  :label="vm.showValue" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</el-option>
                            </el-select>
                        </template>

                        <template v-if="item.type == '11'" >
                            <el-cascader  :ref="item.key" size="mini" @change="handleChange(item.key)" clearable  :placeholder="item.lable"
                                          v-model="searchInputDtos[item.key].searchTypeForDateDto.end" :props="cascaderProps[item.key]"
                            ></el-cascader>
                        </template>

                        <!--日期框-->
                        <template v-if="item.type == '1'">
                            <el-date-picker value-format="yyyy-MM-dd"  :placeholder="item.lable"
                                            v-model="searchInputDtos[item.key].searchTypeForDateDto.end" style="width:180px"
                                            type="date" >
                            </el-date-picker>
                        </template>

                        <!--日期框时分秒-->
                        <template v-if="item.type == '5'">
                            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss"  :placeholder="item.lable"
                                            v-model="searchInputDtos[item.key].searchTypeForDateDto.end" style="width:180px"
                                            type="datetime" >
                            </el-date-picker>
                        </template>

                        <!--日期框年月-->
                        <template v-if="item.type == '15'">
                            <el-date-picker value-format="yyyyMM"  :placeholder="item.lable"
                                            v-model="searchInputDtos[item.key].searchTypeForDateDto.end" style="width:180px"
                                            type="month" >
                            </el-date-picker>
                        </template>

                    </template>

                </el-form-item>

                <el-form-item v-if="JSON.stringify(listSearch) != '{}' " >
                    <el-button type="primary" @click="toQuery">查询</el-button>
                    <el-button type="primary" plain @click="printHtml">报表打印</el-button>
                    <el-button type="primary" plain @click="expexcel">导出excel</el-button>
                    <el-button type="primary" plain @click="f_search_custom">自定义查询</el-button>
                </el-form-item>

                <el-form-item v-if="JSON.stringify(listSearch) == '{}' " >
                    <el-button type="primary" plain @click="printHtml">报表打印</el-button>
                    <el-button type="primary" plain @click="expexcel">导出excel</el-button>
                    <el-button type="primary" plain @click="f_search_custom">自定义查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 分割线-->
        <el-divider   style="margin: 3px 0;" ></el-divider>

    </div>

    <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizeChange"
            layout="prev, pager, next,total,sizes"
            :total="total"
            :page-size="pageSize"
            :page-sizes="pageSizes"
    >
    </el-pagination>

    <!-- 每页数据数量一定，最后一页需要显示合计 -->
    <div id="printListRoster" style="padding: 0 40px;">
        <div style="break-after: page;">
            <table border="0" cellpadding="8" style="border-collapse: collapse; width: 100%; font-size: 14px;">
                <thead >
                    <tr style="border: none;"  >
                        <th :colspan="headData.colspan" style="border: none;" >
                            <p style="font-size: 25px;" contenteditable="true" >{{headData.bbmc}}</p>
                            <table border="0" width="100%" style="border: none;" class="not_border"  >
                                <tr v-for="(item1,index1) in headData.list1">
                                    <td  :style="itemTd.style" class="head_td" :width="itemTd.width" :align="itemTd.align" :rowspan="itemTd.rowspan" :colspan="itemTd.colspan" v-for="(itemTd,index) in item1" contenteditable="true" >{{itemTd.zdzwmc}}</td>
                                </tr>
                            </table>
                        </th>
                    </tr>

                    <tr v-for="(item2,index) in headData.list2" >
                        <th :style="itemTd.style" :width="itemTd.width" :align="itemTd.align" :rowspan="itemTd.rowspan" :colspan="itemTd.colspan" v-for="(itemTd,index2) in item2"><div v-html="itemTd.zdzwmc"></div></th>
                    </tr>
                </thead>



                <tbody>
                    <tr v-for="(item,index1) in tableData">
                        <template v-if="item.is_cell" v-for="(itemTd,index) in headData.listcolumns" >
                            <td v-if="itemTd.zdmc == key" :style="getValueForObject(item.cell[itemTd.zdmc],'style')" :width="getValueForObject(item.cell[itemTd.zdmc],'width')" :align="getValueForObject(item.cell[itemTd.zdmc],'align')" :colspan="getValueForObject(item.cell[itemTd.zdmc],'colspan')"  :rowspan="getValueForObject(item.cell[itemTd.zdmc],'rowspan')"  v-for="(i,key) in item.data">{{item.data[itemTd.zdmc] == 0 ? '':item.data[itemTd.zdmc] }}</td>
                        </template>

                        <td v-if="!item.is_cell" :style="itemTd.style" :width="itemTd.width" :align="itemTd.align" :colspan="itemTd.colspan"  v-for="(itemTd,index) in headData.listcolumns">{{item.data[itemTd.zdmc] == 0 ? '':item.data[itemTd.zdmc] }}</td>


                    </tr>
                </tbody>

                <tfoot>
                    <tr>
                        <th style="width: 100%;"   :colspan="headData.colspan" >
                            <div v-for="(item,index) in headData.list3" style="display: flex; justify-content: space-around; margin-top: 30px; font-size: 10px;">
                                <div class="head_td" :style="itemTd.style" :width="itemTd.width" :align="itemTd.align" :rowspan="itemTd.rowspan" :colspan="itemTd.colspan" v-for="(itemTd,index) in item"  contenteditable="true"  v-html="itemTd.zdzwmc"></div>
                            </div>
                        </th>
                    </tr>

                </tfoot>
            </table>


        </div>
    </div>
</div>

<script>


    var vm = new Vue({
        el: "#app",
        data() {
            return {
                headData:{},
                tableData:[],
                parmsData:{},
                listSearch: {}, //默认查询的字段
                searchInputDtos: {},
                //分页参数
                pageNumber:1,
                total:0,
                pageCount:0,
                pageSize:50,
                pageSizes:[10,15,20,50,100,200,500,1000,2000,3000,4000,5000,6000],
            };
        },
        created(){
            this.parmsData = getParams();
            this.getSearchInput();
            this.getHead();
        },
        methods: {
            getValueForObject(o,key){
                let obj = o;
                if(obj == undefined){
                    return "";
                }
                return obj[key];
            },
            //每页记录数改变
            sizeChange(val){
                this.pageSize = val;
                this.getListdata();
            },
            //开始翻页
            handleCurrentChange(val){
                this.pageNumber = val;
                this.getListdata();
            },
            //获取查询的输入框
            async getSearchInput(){
                const res = await postWebCustom(getTableId("2447"),{id:this.parmsData.id})
                this.listSearch = res.data;
                this.searchInputDtos = res.data;
            },
            f_search_custom() {
                let btn = {
                    btn: ['关闭']
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };
                top.data.custom = "IS_SEARCH";
                top.f_layer_open_get("/admin/html/dataManagement/custom_search.html?tableId="+this.headData.tableid, "80%", "65%", function () {

                }, btn, "自定义搜索")
            },
            //获取表头所有字段
            async getHead(){
                const res = await postWebCustom(getTableId("2444"),{id:this.parmsData.id,searchInputDtos:this.searchInputDtos});
                this.headData = res.data;
                if(this.headData.sfzdcx == "1"){
                    this.getListdata();
                }
            },
            //数据查询
            async getListdata(){
                let i = load();
                const res = await postWebCustom(getTableId("2446"),{id:this.parmsData.id,searchInputDtos:this.searchInputDtos,pageNumber:""+this.pageNumber,pageSize:""+this.pageSize});
                layer.close(i);
                if(res.code == 0){
                    top.error(res.msg);
                    return;
                }
                this.tableData = res.data.rows;
                this.total = parseInt(res.data.total);
                this.pageSize = parseInt(res.data.pageSize);
                this.pageCount = parseInt(res.data.pageCount);
            },
            NumberQfw(str){
                if(str == "/"){
                    return "";
                }
                if(Number(str) == 0){
                    return "";
                }
                if(str!="" && "/" != str){
                    let lw = parseFloat(str).toFixed(2);
                    return parseFloat(lw).toLocaleString("en",{ minimumFractionDigits: 2 });
                }
                return str;
            },
            async expexcel(){
                let btn = {
                    btn: ['关闭']
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };

                load();
                const res = await postWebCustom(getTableId("2455"),{id:this.parmsData.id,searchInputDtos:this.searchInputDtos});
                layer.closeAll();
                if(res.code == 0){
                    top.alert(res.msg);
                    return;
                }

                top.f_layer_open_get("/admin/html/dataManagement/expexcel-getpro.html", "60%", "25%", function () {

                }, btn, "数据导出")



            },
            printHtml() {
                $("#printListRoster").print();
            },
            async toQuery(){
                this.pageNumber = 1;
                const res = await postWebCustom(getTableId("2444"),{id:this.parmsData.id,searchInputDtos:this.searchInputDtos});
                this.headData = res.data;
                this.getListdata();
            },

        },
    });

    function setData(data) {
        vm.setData(data);
    }
</script>
</body>
</html>